<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生 Ajax 请求</title>
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"/>
    <script type="text/javascript">
        function ajaxRequest() {
            var elementById = document.getElementById('form1');
            var formData = new FormData(elementById);
            //1.创建 XMLHttpRequest 对象
            var xmlHttpRequest = new XMLHttpRequest();
            //2.请求参数的设置 调用 open 方法
            //参数分别是：请求方式、URL、是否使用异步请求方式
            xmlHttpRequest.open(elementById.method,elementById.action, true);
            // xmlHttpRequest.open('GET', './ajax01.do', true);
            //3. 监听  onreadystatechange 事件
            //当 readyState 改变时，就会触发 onreadystatechange 事件
            //readyState == 4: 请求已完成，且响应已就绪
            xmlHttpRequest.onreadystatechange = function () {
                // 等到服务器响应就绪的时候 执行以下内容
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    // xmlHttpRequest.responseText  代表服务器响应的字符串参数
                    console.log(xmlHttpRequest.responseText);
                    //接收的 JSON 字符串，转换成 JSON 对象
                    var studentList = JSON.parse(xmlHttpRequest.responseText);
                    console.log(studentList);
                    // var tblEle = document.getElementById('tbl');
                    // var tblEle2 = document.getElementById('tb2');
                    // var  str="";
                    // for (var i = 0; i < studentList.length; i++) {
                    //     var student = studentList[i];
                    //     var tr = document.createElement('tr');
                    //     var td1 = document.createElement('td');
                    //     td1.appendChild(document.createTextNode(student.id));
                    //     var td2 = document.createElement('td');
                    //     td2.appendChild(document.createTextNode(student.name));
                    //     var td3 = document.createElement('td');
                    //     td3.appendChild(document.createTextNode(student.age));
                    //     var td4 = document.createElement('td');
                    //     td4.appendChild(document.createTextNode(student.school));
                    //     tr.appendChild(td1);
                    //     tr.appendChild(td2);
                    //     tr.appendChild(td3);
                    //     tr.appendChild(td4);
                    //     tblEle.appendChild(tr);
                    //     str+="<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.age + "</td><td>" +student.school + "</td></tr>";
                    // }
                    // tblEle2.innerHTML=str;
                }
            }
            //4.调用 send 方法 发送请求
            xmlHttpRequest.send(formData);
        }
        window.onload = function () {
            // document.getElementById('btn').onclick = function () {
            //     ajaxRequest();
            // }
            document.getElementById('btnsubmit').onclick = function () {
                ajaxRequest();
            }
        }

    </script>
</head>
<body>
<button id="btn">发射Ajax请求</button>
<table id="tbl" class="table">
</table>
<table id="tb2" class="table">
</table>
<form action="./ajax01.do" method="post" id="form1">
    学生ID：<input type="text" name="id"><br>
    学生姓名：<input type="text" name="username"><br>
    学生年龄：<input type="text" name="age"><br>
    学校：<input type="text" name="school"><br>
    <button type="button" id="btnsubmit">提交</button>
</form>
<script>
    window.jQuery || document.write(
        '<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>'
    )
</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
</body>
</html>